<template>
	<view class="content" @touchmove="touchend($event)">
		<u-notice-bar mode="horizontal" :volume-icon="false" :list="list"></u-notice-bar>
		<view class="content_top">
			<view class="page_logo" v-if="tep != 'xxl'">
				<view class="logo"><image class="logo" src="/static/logo.png"></image></view>
				<view class="logo_text">
					<view class="title">懂钱弟</view>
					<view class="dec">找懂钱弟，借款更容易</view>
				</view>
			</view>
			<view class="top_centre">
				<view>您最高可以借200000元</view>
				<view class="top_all" @click="number = 200000">全部借出</view>
			</view>
			<view class="top_input">
				<text class="money">￥</text>
				<input
					v-if="number > 200000"
					class="top_box_input"
					v-model="number"
					:value="number"
					@input="input"
					:key="number"
					type="number"
					placeholder="请输入借款金额"
					placeholder-class="input-placeholder"
					maxlength="6"
				/>
				<input
					v-else
					class="top_box_input"
					v-model="number"
					:value="number"
					@input="input"
					type="number"
					placeholder="请输入借款金额"
					placeholder-class="input-placeholder"
					maxlength="6"
				/>
				<view class="top_input_r">
					<text>（金额可修改）</text>
					<image class="guanbi" src="/static/guan_bi.png" lazy-load="false" @click="number = ''"></image>
				</view>
			</view>
			<view class="top_b" v-if="tep != 'xxl'">
				<view class="icon">限时优惠</view>
				<view class="top_b-r">
					<text class="">日利率</text>
					<text class="">0.025</text>
					<text class="">0.035%</text>
					<text class="">（1千元用1天只需0.25元）</text>
				</view>
			</view>
			<view v-else class="top_b">
				<view class="icon">限时优惠</view>
				<view class="top_b-r">
					<text class="">最低年利率</text>
					<text class="">9%</text>
					<text class="">（12.6%）</text>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#f5f5f5"></u-gap>
		<view class="list">
			<view class="top_call">次日起可还款、免手续费、免剩余天数利息</view>
			<template v-for="(item, index) in periods">
				<view class="list_item" :class="{ active: index == listIndex }" :key="index" @click="listIndex = index">
					<view class="item_l">
						<view class="item_top">
							<text>分{{ item }}个月还</text>
							<text>首期还￥{{ ((number * 0.0075 * Math.pow(1.0075, item)) / (Math.pow(1.0075, item) - 1)).toFixed(2) }}</text>
						</view>
						<view class="item_b">借满{{ item }}个月，总利息：￥{{ (number * item * 30 * 0.00025).toFixed(2) }}</view>
					</view>
					<view class="item_r"><image class="item_r" :src="listIndex == index ? '/static/xuan_zhong.png' : '/static/wei_xuan.png'"></image></view>
				</view>
			</template>
			<view class="item_btn">
				<text>优惠劵</text>
				<view class="">
					<text style="color: red; font-weight: bold">-￥30</text>
					<u-icon color="#969799" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item_btn">
				<text>收/还款账户</text>
				<view style="display: flex; align-items: center">
					<image class="yinhang" src="/static/yin_hang.png" lazy-load="false"></image>
					<u-icon color="#969799" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-gap height="24" bg-color="#f5f5f5"></u-gap>
		<view class="footer">
			<view class="input_box">
				<image class="shouji" src="/static/ShouJi.png" lazy-load="false"></image>
				<input
					class="box_input"
					v-model="phone"
					type="number"
					placeholder="请输入手机号"
					placeholder-style=""
					placeholder-class="input-placeholder"
					maxlength="11"
				/>
			</view>
			<view class="btn" @click="handleBtn">去借钱</view>
			<view class="protocol animation" :class="'animation-' + animation">
				<u-checkbox v-model="checked" size="30" label-size="24rpx">注册即表明您已阅读并同意</u-checkbox>
				<text class="protocol_text" @click="openAgrment('zc')">《服务协议》</text>
				<text class="protocol_text" @click="openAgrment('ys')">《隐私协议》</text>
			</view>
		</view>
		<view class="explain" v-if="id != 8 && id != 9">
			<view class="foo">具体放款金额及放款时间视个人情况而定</view>
			<view class="foo">贷款有风险,申请需谨慎!</view>
			<view class="foo">货款服务由合作持牌机构提供</view>
			<view class="foo" style="color: #3478f2">成都躁动信息科技有限公司</view>
			<view class="foo" style="color: #3478f2">蜀ICP备2020033414号</view>
		</view>
		<view class="explain" v-if="id == 8">
			<view class="foo">贷款有风险，借款需谨慎</view>
			<view class="foo">借款额度、放款时间以实际审批为准</view>
			<view class="foo">公积金相关资料仅作为贷款服务验资证明 放款路径与公积金账户无关</view>
			<view class="foo">资金来源：南京市天下捷融互联网科技小额贷款有限公司</view>
			<view class="foo">综合年化利率最低6-24%（单利），具体以审批结果为准</view>
		</view>
		<view class="explain" v-if="id == 9">
			<view class="foo">贷款有风险，借款需谨慎</view>
			<view class="foo">借款额度、放款时间以实际审批为准</view>
			<view class="foo">公积金相关资料仅作为贷款服务验资证明 放款路径与公积金账户无关</view>
			<view class="foo">资金来源：南京市天下捷融互联网科技小额贷款有限公司</view>
			<view class="foo">助贷机构：江开金融服务外包(山东)有限公司</view>
			<view class="foo">综合年化利率最低6-24%（单利），具体以审批结果为准</view>
		</view>
		<!-- <u-mask :show="maskShow">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="jiantou">
						<image class="jiantou_img" src="/static/jiantou.png" lazy-load="false"></image>
					</view>
					<view class="dian">
						<view class="circle">1</view>
						<view class="text">点击右上角的</view>
						<image class="dian_img" src="/static/dian.png" lazy-load="false"></image>
						<view class="text">按钮</view>
					</view>
					<view class="safari">
						<view class="circle">2</view>
						<view class="text">点击弹窗上的</view>
						<image class="safari_img" src="/static/Safari.png" lazy-load="false"></image>
					</view>
				</view>
			</view>
		</u-mask> -->
		<u-popup v-model="show" mode="center" border-radius="16" width="652rpx" height="544rpx" closeable @close="handlePopClose">
			<view class="codeTitle">{{ title }}</view>
			<view class="code_input">
				<input
					class="box_input"
					v-model="code"
					type="number"
					placeholder="请输入验证码"
					placeholder-style=""
					placeholder-class="input-placeholder"
					maxlength="4"
				/>
				<text v-if="!timerShow">{{ count }}s</text>
			</view>
			<view class="code_btn" @click="openView">{{ btnTxt }}</view>
			<view class="text_b">
				<text @click="newGetCode" :class="{ color: !timerShow }">没收到验证码？重新发送 >></text>
				<!-- <image class="text_b_img" src="/static/k.png" lazy-load="false"></image> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
import check from '@/utils/validate'
import { getQueryVariable, openView, uuid } from '@/utils'
import ajax from '@/api'
export default {
	data() {
		return {
			btnTxt: '获取额度',
			timerShow: true,
			count: '',
			timer: null,
			show: false,
			listIndex: 0,
			title: '填写验证码',
			list: ['温馨提示：请理性借用，不能用于购房及偿还住房抵押、投资...'],
			mobile: '',
			periods: [24, 12, 6],
			checked: false,
			code: '',
			phone: '',
			number: 50000,
			animation: '',
			maskShow: false,
			id: getQueryVariable.id,
			tep: location.href.split('/')[3]
		}
	},
	onLoad() {
		//获取地址上的id 统计访问量
		// #ifdef H5
		const id = getQueryVariable.id
		this.tep = location.href.split('/')[3]
		uni.setStorageSync('tep', location.href.split('/')[3])
		uni.setStorageSync('id', id)
		ajax.landing({ guide: id, uuid: uuid() })
		// #endif
	},
	onShow() {
		// #ifdef H5
		let ua = window.navigator.userAgent.toLowerCase()
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			this.maskShow = true
		}
		// #endif
	},
	methods: {
		input(e) {
			let { value } = e.detail
			if (value >= 200000) {
				this.$nextTick(() => {
					this.number = 200000
				})
				console.log(value)

				// uni.hideKeyboard()
			}
		},
		touchend() {
			uni.hideKeyboard()
		},
		openAgrment(type) {
			if (type == 'ys') {
				// #ifdef H5
				let name = this.tep == 'xxl' ? 'privacy1' : 'privacy'
				location.href = `https://website.zd-dqd.com/dqdxy/#/pages/agreement/${name}`
				// #endif
			}
			if (type == 'zc') {
				// #ifdef H5
				let name = this.tep == 'xxl' ? 'index' : 'index1'
				location.href = `https://website.zd-dqd.com/dqdxy/#/pages/agreement/${name}`
				// #endif
			}
		},
		handlePopClose() {
			this.title = '填写验证码'
			this.code = ''
			this.btnTxt = '获取额度'
		},
		newGetCode() {
			if (this.count > 0) return
			this.title = '验证码已重新发送'
			this.btnTxt = '确定'
			this.getCode()
		},
		async getCode() {
			let type = location.href.split('/')[3]
			try {
				const data = await ajax.getCode({ phone: this.phone, channel: this.id })
				switch (data.is_user) {
					case 1:
						this.show = true
						// eslint-disable-next-line no-case-declarations
						const TIME_COUNT = 60
						if (!this.timer) {
							this.count = TIME_COUNT
							this.timerShow = false
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--
								} else {
									this.timerShow = true
									clearInterval(this.timer)
									this.timer = null
								}
							}, 1000)
						}
						break
					case 2:
						uni.setStorageSync('token', data.token)
						if (type == 'zc') {
							openView('/succee/succee')
						} else {
							openView('/material/material', {
								money: this.number,
								periods: this.periods[this.listIndex]
							})
						}
						break
					case 3:
						uni.setStorageSync('token', data.token)
						openView('/succee/succee')
						break
				}
			} catch (error) {
				console.log(error, '失败')
			}
		},
		async openView() {
			let type = location.href.split('/')[3]
			if (this.code == '') {
				uni.showToast({
					title: `请输入验证码`,
					icon: 'none'
				})
				return
			}
			try {
				const data = await ajax.getRegister({ phone: this.phone, yzm: this.code, channel: uni.getStorageSync('id') || 3 })
				uni.setStorageSync('token', data.token)
				if (type == 'zc') {
					openView('/succee/succee')
					return
				}
				data?.next_step == 1
					? openView('/material/material', {
							money: this.number,
							periods: this.periods[this.listIndex]
					  })
					: openView('/succee/succee')
			} catch (error) {
				console.log(error, '失败')
			}
		},
		handleBtn() {
			if (!this.checked) {
				uni.showToast({
					title: '请先勾选隐私/注册协议',
					icon: 'none',
					position: 'bottom'
				})
				this.animation = 'shake'
				setTimeout(() => {
					this.animation = ''
				}, 800)
				return
			}
			if (!check.isTel(this.phone)) {
				uni.showToast({
					title: '请输入有效手机号',
					icon: 'none',
					position: 'bottom'
				})
				return
			}
			this.getCode()
		}
	}
}
</script>

<style lang="scss">
.color {
	color: #ccc;
}
.jiantou {
	display: flex;
	justify-content: flex-end;
	margin-top: 200rpx;
	margin-right: 120rpx;
}
.jiantou_img {
	width: 170rpx;
	height: 170rpx;
}
.dian_img {
	width: 68rpx;
	height: 44rpx;
	margin: 0 16rpx;
}
.safari_img {
	width: 100rpx;
	height: 140rpx;
	margin: 0 16rpx;
}
.dian {
	margin-top: 24rpx;
	margin-left: 100rpx;
	display: flex;
	align-items: center;
}
.safari {
	margin-top: 36rpx;
	margin-left: 100rpx;
	display: flex;
	align-items: center;
}
.circle {
	width: 64rpx;
	height: 64rpx;
	background: #fc1f1f;
	border-radius: 50%;
	line-height: 64rpx;
	text-align: center;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	margin-right: 20rpx;
}
.text {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
.rect {
	width: 100vw;
	height: 100vh;
}
.item_btn {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #969799;
		margin-right: 12rpx;
	}
	.yinhang {
		width: 180rpx;
		height: 68rpx;
		margin-right: 6rpx;
	}
}
.text_b {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
}
.text_b text {
	margin-right: 8rpx;
}
.text_b_img {
	width: 30rpx;
	height: 22rpx;
}
.code_btn {
	width: 528rpx;
	height: 96rpx;
	background: #3478f2;
	border-radius: 16rpx;
	line-height: 96rpx;
	text-align: center;
	font-size: 44rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	margin: 0 auto;
}
.code_input {
	margin: 40rpx auto;
	width: 528rpx;
	height: 92rpx;
	background: #ffffff;
	border: 2rpx solid #707070;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 24rpx;
	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #aeaeae;
	}
}
.codeTitle {
	margin-top: 62rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	text-align: center;
}
.input-placeholder {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #aeaeae;
}
.top_input_r {
	display: flex;
	align-items: center;
	text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #aeaeae;
	}
}
.guanbi {
	width: 32rpx;
	height: 32rpx;
}
.top_box_input {
	font-size: 72rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
	margin-left: 10rpx;
	width: 380rpx;
}
.money {
	// width: 60rpx;
	// height: 60rpx;
	font-size: 72rpx;
}
.top_input {
	width: 702rpx;
	height: 104rpx;
	background: #ffffff;
	border-bottom: 2rpx solid #cdd0d6;
	display: flex;
	align-items: center;
}
.box_input {
	margin-left: 20rpx;
	font-size: 32rpx;
	width: 100%;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.shouji {
	width: 30rpx;
	height: 40rpx;
}
.protocol {
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	.protocol_text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3478f2;
	}
}
.input_box {
	padding: 0 40rpx;
	width: 702rpx;
	height: 104rpx;
	background: #ffffff;
	border: 2rpx solid #707070;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
}
.btn {
	margin-top: 24rpx;
	width: 702rpx;
	height: 104rpx;
	background: linear-gradient(360deg, #017eff 0%, #43c8fe 100%);
	border-radius: 8rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 104rpx;
	color: #ffffff;
	text-align: center;
}
.footer {
	padding: 24rpx;
	background: #fff;
	width: 100%;
}
.item_l {
	width: 85%;
}
.item_b {
	text-align: right;
	margin-top: 14rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
}
.item_top {
	display: flex;
	color: #333333;
	font-size: 28rpx;
	font-family: PingFang SC;
	justify-content: space-between;
}
.item_r {
	width: 32rpx;
	height: 32rpx;
	background: #d7d7d7;
	border-radius: 16rpx;
}
.item_top text:nth-of-type(1) {
	font-weight: bold;
}
.item_top text:nth-of-type(2) {
	font-weight: 800;
}
.list {
	padding: 24rpx;
	background: #ffffff;
	width: 100%;
	.top_call {
		width: 702rpx;
		height: 60rpx;
		background: #e4eeff;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 60rpx;
		color: #559ae2;
		text-align: center;
	}
	.list_item {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 702rpx;
		padding: 26rpx 34rpx;
		background: #ffffff;
		border: 2rpx solid #ececec;
		border-radius: 8rpx;
	}
}
.list_item.active {
	background: #eef4fe;
	border: 2rpx solid #3478f2;
}
.content {
	display: flex;
	flex-direction: column;
}
.top_input {
	margin-top: 42rpx;
}
.top_b {
	margin-top: 28rpx;
	display: flex;
	align-items: center;
	.icon {
		background-color: #f1b941;
		width: 128rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
}
.content_top {
	background-color: #fff;
	padding: 24rpx;
	width: 100%;
}
.top_centre {
	margin-top: 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #696969;
	.top_all {
		color: #3478f2;
	}
}
.top_b-r {
	display: flex;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #464646;
	margin-left: 4rpx;
}
.top_b-r text:nth-of-type(3) {
	text-decoration: line-through;
}
.top_b-r text:nth-of-type(1) {
	color: #464646;
}
.top_b-r text:nth-of-type(2) {
	color: #fc1f1f;
	margin: 0 6rpx;
}
.top_b-r text:nth-of-type(4) {
	color: #333333;
	margin-left: 8rpx;
}
.page_logo {
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 0px;
	}
	.logo_text {
		margin-left: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		.title {
			font-size: 28rpx;
			font-weight: 800;
		}
		.dec {
			font-size: 24rpx;
			font-weight: 400;
		}
	}
}
.explain {
	margin-top: 100rpx;
	margin-bottom: 50rpx;
}
.foo {
	text-align: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #aeaeae;
}
// .foo:last-child {
// 	color: #3478f2;
// }
.animation-shake {
	animation: shake 0.3s !important;
}
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	10% {
		transform: translateX(-9px);
	}

	20% {
		transform: translateX(8px);
	}

	30% {
		transform: translateX(-7px);
	}

	40% {
		transform: translateX(6px);
	}

	50% {
		transform: translateX(-5px);
	}

	60% {
		transform: translateX(4px);
	}

	70% {
		transform: translateX(-3px);
	}

	80% {
		transform: translateX(2px);
	}

	90% {
		transform: translateX(-1px);
	}
}
</style>
